<template>
  <div id="baike"
       :class="{brandShow: brandShow}">
    <div class="baike-header">
      <div class="fl">
        <el-input placeholder="Key Words"
                  v-model="keyword">
          <i slot="prefix"
             class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
    </div>
    <f-scroll :scrollStyle="wrapStyle">
      <el-row :gutter="10"
              v-show="!brandShow"
              class="baike-body">
        <el-col v-for="(item,index) in filterBrands"
                :key="item.title"
                :span="12">
          <el-card @click.native="showBrand(index)">
            <div class="fl">
              <img :src="item.img"
                   alt="">
            </div>
            <div class="content">
              <p class="brand">{{item.brand}}</p>
              <p class="desc">{{item.desc}}</p>
              <div v-if="item.url">
                <a :href="item.url"
                   target="__blank"
                   class="url">{{item.url}}</a>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </f-scroll>
    <brand ref="brand"
           @close="closeBrand"
           :brandShow="brandShow"
           :resource="resource"></brand>
  </div>
</template>

<script>
import brand from "./brand.page";

export default {
  components: { brand },
  data() {
    return {
      brands: [],
      resource: {},
      brandShow: false,
      keyword: "",
      wrapStyle: {
        height: ""
      }
    };
  },
  created() {
    let local = "http://localhost:8080/static/baike.json";
    let server = "http://bisys.luxsens.com/static/baike.json";
    this.$http.get(server).then(res => {
      res.forEach(item => {
        item.resource.coverBrand = item.brand;
        item.resource.brand = item.brand;
        item.resource.videos = [];
        if (item.id) {
          item.resource.id = item.id;
        }
      });
       this.brands = res;
    });
  },
  mounted() {
    this.setContentHeight();
  },
  computed: {
    filterBrands() {
      if (!this.keyword) {
        return this.brands;
      } else {
        return this.brands.filter(item => {
          let br = item.brand.toLowerCase();
          return br.indexOf(this.keyword.toLowerCase()) > -1;
        });
      }
    }
  },
  methods: {
    setContentHeight() {
      this.$nextTick(() => {
        let dom = document.querySelector(".baike-body");
        let len = document.body.clientHeight - dom.offsetTop;
        this.wrapStyle.height = len - 48 + "px";
      });
    },
    showBrand(index) {
      let brand = this.brands[index];
      this.resource = brand.resource;
      this.$http.get("brands/videos/" + brand.id).then((res) => {
        console.log(res)
        res.forEach((item)=> {
           item.url = 'http://productdb.luxsens.com/biapi/video/' + brand.id + '/' + item.file_name;
           item.play = true;
           item.chu = true;
        })
        dd(res);
        this.resource.videos = res;
      });
      setTimeout(() => {
        this.brandShow = true;
      }, 100);
    },
    closeBrand() {
      this.brandShow = false;
    },
    toggle(video) {
      video.fold = !video.fold;
    }
  },
  beforeRouteLeave(to, from, next) {
    next();
  }
};
</script>

<style lang="scss">
@import "../../assets/styles/color.scss";
@import "../../assets/styles/mixins.scss";
#baike {
  .baike-header {
    margin-top: 3px;
    border-bottom: 2px solid #d3d3d8;
    padding-bottom: 10px;
    height: 50px;
    line-height: 50px;
    text-align: left;
    padding-left: 10px;
    box-shadow: 0 1px rgba(255, 255, 255, 0.4);
    .fr {
      margin-right: 20px;
    }
    .el-button--primary {
      height: 38px;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  overflow: auto;
  &.brandShow {
    overflow: hidden;
  }
  height: 95%;
  .el-card {
    margin-top: 10px;
    .el-card__body {
      cursor: pointer;
      padding: 0;
      @include clearfix();
      .content {
        font-family: "PingFang SC";
        margin-left: 240px;
        padding-top: 20px;
        text-align: left;
        .brand {
          text-transform: uppercase;
          font-size: 22px;
          color: #333;
        }
        .desc {
          font-size: 18px;
          color: #666;
          line-height: 30px;
          height: 60px;
          overflow: hidden;
          // display: -webkit-box !important;
          // overflow: hidden !important;
          // text-overflow: ellipsis !important;
          // word-break: break-word !important;
          // -webkit-box-orient: vertical !important;
          // -webkit-line-clamp: 2 !important;
          &::after {
            content: "...";
          }
        }

        .url {
          font-size: 18px;
          color: #3cbdef;
          text-decoration: underline;
        }
      }
    }
  }
}
</style>
